<template>
    <view class="h-full">
        <!-- 顶部一级分类 -->
        <tabs
            :current="current"
            @change="handleChange"
            height="80"
            bar-width="60"
            :barStyle="{ bottom: '0' }"
        >
            <!-- 每个一级分类下，左侧显示二级，右侧显示三级 -->
            <tab v-for="(item, i) in list" :key="i" :name="item.name">
                <view class="three-cascade">
                    <!-- 二级分类侧栏 -->
                    <scroll-view scroll-y="true" class="aside" v-if="item?.children?.length">
                        <view
                            class="aside-item"
                            :class="{ active: subCurrent === sIndex }"
                            v-for="(sub, sIndex) in item.children"
                            :key="sub.id || sIndex"
                            @click="subCurrent = sIndex"
                        >
                            <text class="name">{{ sub.name }}</text>
                            <view v-if="subCurrent === sIndex" class="active-line"></view>
                        </view>
                    </scroll-view>

                    <!-- 三级分类栅格 -->
                    <view class="content">
                        <view class="grid">
                            <view
                                class="grid-item"
                                v-for="(third, tIndex) in item.children?.[subCurrent]?.children || []"
                                :key="third.id || tIndex"
                            >
                                <router-navigate :to="`/pages/search/search?id=${third.id}&name=${third.name}`" hover-class="none">
                                    <view class="grid-card">
                                        <u-image mode="aspectFit" width="150rpx" height="150rpx" :src="third.image" />
                                        <view class="grid-title">{{ third.name }}</view>
                                    </view>
                                </router-navigate>
                            </view>
                        </view>
                    </view>
                </view>
            </tab>
        </tabs>
    </view>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useDataEffect } from "./useDataEffect";
const { list, current } = useDataEffect()

// 当前选中的二级分类索引
const subCurrent = ref<number>(0)

// 顶部一级切换时重置左侧二级选中
const handleChange = (index: number) => {
    current.value = Number(index)
    subCurrent.value = 0
}

// 当外部 current 变化时，同步重置二级
watch(() => current.value, () => { subCurrent.value = 0 })
</script>

<style>
    .three-cascade {
        height: calc(100vh - 136px - env(safe-area-inset-bottom));
        display: flex;
    }
    .aside {
        width: 220rpx;
        background: #fff;
    }
    .aside-item {
        position: relative;
        padding: 26rpx 20rpx;
        text-align: center;
        font-size: 24rpx;
    }
    .aside-item.active {
        font-weight: bold;
        color: var(--color-primary);
    }
    .active-line {
        position: absolute;
        width: 6rpx;
        height: 30rpx;
        left: 4rpx;
        top: 50%;
        transform: translateY(-50%);
        background: var(--color-primary);
    }
    .content {
        flex: 1;
        padding: 20rpx;
    }
    .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20rpx;
    }
    .grid-card {
        display: flex;
        align-items: center;
        flex-direction: column;
        background: #fff;
        border-radius: 10rpx;
        padding: 20rpx 10rpx;
    }
    .grid-title {
        margin-top: 10rpx;
        font-size: 24rpx;
        text-align: center;
    }
</style>